import { message as antdMessage } from "../../antd/index";
import { ErrorIcon, InfoIcon, SuccessIcon, WarnIcon, Size } from "../Svg";
// import "../../antd/message/style";

import { MessageApi, NoticeType, ArgsProps } from "../../antd/message";
export type MessageState = NoticeType | "warn";
type MessageStateApiFn = MessageApi["info"];
type MessageStateApi = {
  [key in MessageState]: MessageStateApiFn;
};
const icons: {
  [key in MessageState]: ((props?: Size) => JSX.Element) | null;
} = {
  success: SuccessIcon,
  info: InfoIcon,
  error: ErrorIcon,
  warning: WarnIcon,
  warn: WarnIcon,
  loading: null,
};
const Keys: MessageState[] = ["success", "info", "error", "warning", "warn", "loading"];

const api: MessageStateApi = Keys.reduce((api, key) => {
  const fn: MessageStateApiFn = (content, duration, onClose) => {
    const icon = icons[key];
    const config = (content as ArgsProps).content ? (content as ArgsProps) : { content, duration, onClose };
    const params = Object.assign({ type: key, icon: icon && icon({ width: 16, height: 16 }) }, config);
    return antdMessage.open(params as ArgsProps);
  };
  api[key] = fn;
  return api;
}, {} as MessageStateApi);
const { open, config, destroy, useMessage } = antdMessage;

const message: MessageApi = { open, config, destroy, useMessage, ...api };

export default message;
